import React, { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import './shopDetail.css'
import axios from "axios";
import { NavBar, Space, Toast } from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline } from 'antd-mobile-icons'
export default function ShopDetail() {
    const location = useLocation()
    const navigate = useNavigate()
    const shop_id = location.state
    const back = () => {
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
        navigate(-1)
    }

    const [shopDetail, setShopDetail] = useState({})
    const getShopDetail = async () => {
        let res = await axios.get(`http://localhost:3000/ycf/getShopDetail?_id=${shop_id}`)
        if (res.data.code == 200) {
            setShopDetail(res.data.data[0])
            console.log(res.data.data[0])
        }
    }

    useEffect(() => {
        getShopDetail()
    }, [shop_id])


    return (
        <div className="shopDetail-box">
            <div className="shopDetail-title">
                <NavBar onBack={back}></NavBar>
            </div>
            <div className="shopDetail-content">
                <div className="shopDetail-content-top">
                    <img className='shopDetail-img' src={shopDetail.doorPhotoImgUrl} alt="" />
                </div>
                <div className="shopDetail-content-middle">
                    <h2 className="shopDetail-title-text">{shopDetail.store}</h2>
                    <p className="shopDetail-title-text-1">{shopDetail.detailAddr} | {shopDetail.service}</p>
                    <span className="shopDetail-title-text-1">{shopDetail.businessTime}</span>
                    <div className="shopDetail-phone">
                        {shopDetail.detailAddr}{shopDetail.store}
                    </div>
                    {shopDetail.coupons && shopDetail.coupons.length > 0 ? (
                        shopDetail.coupons.map((coupon) => (
                            <div key={coupon._id}
                                className="coupon-item"
                                onClick={() => {
                                    navigate('/couponDetail', { state: coupon._id })
                                }}
                            >
                                <img className='coupon-item-img' src={coupon.imgUrl} alt="" />
                                <div>
                                    <h4 className="coupon-title">{coupon.title}</h4> {/* 假设你想展示优惠券的标题 */}
                                    <div style={{display:'flex'}}>
                                        <h3 style={{marginTop:'3rem'}}>已售{coupon.num}</h3>
                                        <h3 className="coupon-price">￥{coupon.endPrice}</h3>
                                    </div>
                                </div>
                            </div>
                        ))
                    ) : (
                        <span>没有可用的优惠券</span>
                    )}
                </div>
            </div>
        </div>
    )
}